<template>
	<view class="pd16_15">
		<view class="box pd16_15 flex">
			<image class="tuan-buy-l" :src="buydata.img" mode="aspectFill"></image>
			<view class="tuan-buy-r pl15">
				<view v-if="mid>0" class="ft14 ftw600 cl-main">{{videoInfo.name}}【{{$t('videobuy.text5')}}】【ID：{{mid}} 】</view>
				<view v-else class="ft14 ftw600 cl-main">{{videoInfo.name}}</view>
				<view v-if="mid>0" class="mt12 alcenter">
					<view>
						<text class="ft14 cl-orange">{{$t('videobuy.text3')}}：</text>
						<text class="ft16 cl-orange ftw600">¥{{videoInfo.vipprice}}</text>
					</view>
					<view>
						<text class="ft14 cl-notice">{{$t('videobuy.text4')}}：</text>
						<text class="ft14 cl-notice text-line">¥{{videoInfo.price}}</text>
					</view>
				</view>
				<view v-else class="mt12 alcenter">
					<view style="display: flex; align-items: center; flex-wrap: wrap;">
						<text class="ft14 cl-orange">{{$t('videobuy.text1')}}：</text>
						<view class="ft16 cl-orange ftw600" style="display: flex;align-items: center;">
							{{videoInfo.vipprice}}
							<image src="@/static/gold.png" style="width: 34rpx; margin-left: 10px;" mode="widthFix">
							</image>
						</view>
					</view>
					<view>
						<text class="ft14 cl-notice">{{$t('videobuy.text2')}}：</text>
						<text class="ft14 cl-notice text-line">{{videoInfo.price}}{{$t('videobuy.text10')}}</text>
					</view>

				</view>
			</view>
		</view>
		<view class="box mt16 pd16_15">
			<view class="flex alcenter space">
				<text class="ft14 cl-info2">{{$t('videobuy.text6')}}</text>
				<view class="ft16 cl-main ftw600 cl-orange" style="display: flex;align-items: center;">{{videoInfo.order_amount}}
					<image src="@/static/gold.png" style="width: 34rpx; margin-left: 10px;" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<view class="box mt16 pd16_15">
			<view class="ft16 pb16 ftw600 cl-main">{{$t('videobuy.text7')}}</view>
			<radio-group @change="changeType">
				<view class="pt16 pb16 flex alcenter space">
					<view class="flex alcenter">
						<text class="ml15 ft14 ftw500 cl-main">{{$t('videobuy.text8')}}</text>
					</view>
					<view>
						<radio :value="1" :checked="params.pay_type ==  1" :color="tempColor" />
					</view>
				</view>
				<view class="pt16 pb16 flex alcenter space">
					<view class="flex alcenter">
						<text class="ml15 ft14 ftw500 cl-main">{{$t('videobuy.text9')}}</text>
					</view>
					<view>
						<radio :value="2" :checked="params.pay_type ==  2" :color="tempColor" />
					</view>
				</view>
			</radio-group>
		</view>
		<view class="form-footer-h">
			<view class="form-footer form-footer-h">
				<view class="form-footer-main pd10_15">
					<button class="btn-big" @click="okTap" :style="getBtnStyle">{{$t('buy')}}</button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import util from '../../../utils/util'
	export default {
		data() {
			return {
				num: 1,
				coupon_id: 0,
				buydata: [],
				buytype: '微信',
				dataList: [],
				money: 0,
				mid: 0,
				openid: '',
				pricebuy: 0,
				wxlx: 'wxh5',
				videoInfo: {},
				coupons: [{
						coupon_id: 1,
						num: 20
					},
					{
						coupon_id: 2,
						num: 30
					},
					{
						coupon_id: 3,
						num: 40
					},
				],
				params: {
					drama_id: '',
					video_id: '',
					buy_type: '',
					pay_type: '1',
					coupon_id: ''
				},
			}
		},
		onLoad(option) {
			this.buydata = uni.getStorageSync("buydata")
			this.params.token = uni.getStorageSync("userinfo").token
			this.params.drama_id = this.buydata.pid
			this.params.video_id = this.buydata.id
			this.params.buy_type = option.mid == 0 ? 1 : 2
			console.log(option, this.buydata);
			this.buyVideoInfo()
			this.params.pay_type = option.type
			if (this.params.pay_type == 2) {
				uni.navigateTo({
					url: '/pages/client/wallet/discount-coupon?type=1'
				})
			}
		},
		onShow() {
			if (uni.getStorageSync("userinfo").token) {
				this.ongrzlTap()
				this.money = uni.getStorageSync("userinfo").money
			} else {
				uni.showModal({
					title: '温馨提示',
					content: '请先登录',
					showCancel: true,
					confirmText: "登录",
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						} else if (res.cancel) {
							uni.navigateBack();
						}
					}
				});
			}
			util.setNavTitle()
		},
		methods: {
			buyVideoInfo() {
				let data = {
					token: uni.getStorageSync("userinfo").token,
					drama_id: this.buydata.pid,
					video_id: this.buydata.id,
					buy_type: this.params.buy_type
				}
				uni.request({
					url: this.configs.webUrl + '/api/pay/buyVideoInfo',
					data: data,
					success: res => {
						console.log(res);
						this.videoInfo = res.data.data
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				});
			},
			okTap() {
				console.log(123, this.params);
				uni.request({
					url: this.configs.webUrl + '/api/pay/coinBuyVideo',
					data: this.params,
					success: res => {
						if (res.data.code == 1) {
							uni.navigateBack()
						}
						uni.showToast({
							title: res.data.msg,
							icon: "none",
							mask: true,
							duration: 1000
						})
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				});
			},
			wxxcx(data) {
				uni.requestPayment({
					"provider": 'wxpay',
					"appId": data.appId,
					"timeStamp": data.timeStamp + '',
					"nonceStr": data.nonceStr,
					"package": data.package,
					"signType": 'MD5',
					"paySign": data.sign,
					success: function(res1) {
						uni.showModal({
							title: '温馨提示',
							content: '支付成功',
							showCancel: false,
							confirmText: "确定",
							success: function(res) {
								if (res.confirm) {
									uni.setStorage({
										key: 'isbuy',
										data: 2
									})
									uni.navigateBack();
								} else if (res.cancel) {

								}
							}
						});
						//uni.showToast({ title: '支付成功',icon:"none" });
						console.log('success:' + JSON.stringify(res1));
					},
					fail: function(err1) {
						uni.showModal({
							title: '支付失败',
							content: JSON.stringify(err1),
							showCancel: false,
							confirmText: "确定",
							success: function(res) {
								if (res.confirm) {
									//uni.navigateBack();
								} else if (res.cancel) {

								}
							}
						});
						//uni.showToast({ title: JSON.stringify(err1),icon:"none" });
						console.log('fail:' + JSON.stringify(err1));
					}
				});
			},
			async ongrzlTap() {
				let data = {};
				data.token = uni.getStorageSync("userinfo").token;
				data.uid = uni.getStorageSync("userinfo").id;
				uni.request({
					url: this.configs.webUrl + '/api/user/index',
					data: data,
					success: res => {
						if (res.data.code == 1) {
							let ionfo = res.data.data
							ionfo.isLogin = true
							this.userinfo = ionfo
							uni.setStorage({ //缓存配置信息
								key: 'userinfo',
								data: res.data.data
							})
							if (res.data.data.avatar) {
								var str = res.data.data.avatar;
								if (str.indexOf("data:image") != -1) {
									this.avatar = '';
								} else {
									if (str.indexOf("http") != -1) {
										this.avatar = res.data.data.avatar;
									} else {
										this.avatar = this.configs.imgUrl + res.data.data.avatar;
									}
								}
							} else {
								this.avatar = '';
							}
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "none"
							});
						}
					},
					fail: (data, code) => {
						//console.log('fail' + JSON.stringify(data));
					}
				});
			},
			jianAct() {
				if (this.num == 1) return;
				this.num = this.num - 1;
			},
			jiaAct() {
				if (this.num > 99) return; //后面改为库存数量
				this.num = this.num + 1;
			},
			changeType(e) {
				this.params.pay_type = e.detail.value;
				if (this.params.pay_type == 2) {
					uni.navigateTo({
						url: '/pages/client/wallet/discount-coupon?type=1'
					})
				}
			},
			wxlogin() {
				var this_ = this
				uni.login({
					timeout: 10000,
					provider: 'weixin', //如果是uniapp，在这里需要标明平台的类型，支持的参数请查阅uniapp官网的uni.login()文档
					success: (res) => {
						console.log(res);
						//登陆成功的回调
						uni.request({
							url: this.configs.webUrl + '/api/user/getOpenid',
							method: 'GET',
							data: {
								token: uni.getStorageSync("userinfo").token, //你的小程序的secret,  
								code: res.code //wx.login 登录成功后的code  
							},
							success: (cts) => {
								console.log(cts.data.code);
								if (cts.data.code == 1) {
									this_.openid = cts.data.data.openid
								} else {
									uni.showModal({
										title: '温馨提示',
										content: JSON.stringify(cts.data),
										showCancel: true,
										confirmText: "确定",
										success: function(res) {
											if (res.confirm) {
												uni.navigateBack();
											} else if (res.cancel) {

											}
										}
									});
								}
							},
							fail: (err1) => {
								console.log(err1);
								//失败的回调
							}
						});

					},
					fail: (err) => {
						console.log(err);
						//登陆失败的回调
					}
				})
			}
		}
	}
</script>

<style scoped>
	button {
		background: linear-gradient(90deg, #F75581 0%, #C860FF 100%) !important;
	}
</style>
<style>
	.tuan-buy-l {
		width: 200rpx;
		height: 150rpx;
		background: #F2F2F2;
	}

	.tuan-buy-r {
		width: calc(100% - 200rpx);
	}
</style>